<template>
  <div class="head">
    <slot></slot>
    <div class="head-title">
      <h2 class="title">智慧管家监控大屏</h2>
      <span></span><span></span><span></span><span></span>
    </div>
    <div class="right">
      <div class="rig-cur-time">{{ nowTime }}</div>
      <div class="rig-right">
        <span>{{ yearMD }}</span><br/>
        <span>{{ weekDay }}</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Head',
    data () {
      return {
        yearMD: '',
        weekDay: '',
        timer: null,
        nowTime: new Date()
      }
    },

    created () {
      // this.getDate()
      this.getTime()
      this.getWeek()
    },
    beforeDestroy () {
      clearInterval(this.timer)
    },
    methods: {
      getTime () {
        this.timer = setInterval(() => {
          this.nowTime = this.getDate()
        },1000)
      },
      getDate(){
        const d = new Date((new Date()).getTime()+8*3600*1000)
        const list = d.toISOString().split(/[^0-9]/).slice(0,-2)
        // console.log(`${list[3] }时${list[4]}分${list[5]}秒`)
        let hh = list[3] // < 10 ? `0${list[3]}` : list[3]
        let mm = list[4] // < 10 ? `0${list[4]}` : list[4]
        let ss = list[5] // < 10 ? `0${list[5]}` : list[5]
        // return `${list[3] }时${list[4]}分${list[5]}秒`
        return `${hh}:${mm}:${ss}`
      },
      getWeek () {
        const d = new Date((new Date()).getTime()+8*3600*1000)
        const list = d.toISOString().split(/[^0-9]/).slice(0,-2)
        this.yearMD = `${list[0]}年${list[1]}月${list[2]}日`
        let today = new Date();
        let options = { weekday: 'long' }; // 用于指定日期格式的选项
        let formatter = new Intl.DateTimeFormat('zh-CN', options);
        let day = formatter.format(today); // 格式化当前日期为星期几
        this.weekDay =  day
        console.log(day, 'week')
      }
    }
  }
</script>
<style scoped>
  .head {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .head-title {
    position: relative;
  }
  .head-title span {
    position: absolute;
    width: 15px;
    height: 12px;
    border: 2px solid #058390;
  }
  .head-title span:nth-of-type(1) {
    left: -15px;
    top: 0;
    border-right-color: transparent;
    border-bottom-color: transparent;
  }
  .head-title span:nth-of-type(2) {
    right: -15px;
    top: 0;
    border-left-color: transparent;
    border-bottom-color: transparent;
  }
  .head-title span:nth-of-type(3) {
    bottom: 0;
    right: -15px;
    border-left-color: transparent;
    border-top-color: transparent;
  }
  .head-title span:nth-of-type(4) {
    bottom: 0;
    left: -15px;
    border-right-color: transparent;
    border-top-color: transparent;
  }
  .title {
    color: #daf9fa;
    /* font-size: 25px; */
  }
  .right {
    position: absolute;
    right: 0;
    bottom: 15%;
    display: flex;
    height: 70%;
    display: flex;
    align-items: center;
    border: 1px solid #058390;
    box-sizing: border-box;
    padding:0 5px;
    border-radius: 5px;
  
  }
  .rig-cur-time {
    color: #daf9fa;
    font-size: 35px;
    padding-right: 5px;
  }
  .rig-right span {
    display: inline-block;
    width: 100%;
    color: #058390;
    font-size: 14px;
    /* text-align: center; */
  }
</style>